---
title: Дугмад
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

Списак дугмади и група дугмади које се користе у апликацији.

## Дугме

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Својства    | Тип                   | Опис                                                                                                                                 |
| ----------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| className   | низ                   | Опционо име класе за додатно обликовање                                                                                              |
| Икона       | `React.ComponentType` | Опционални компоненте иконе која се приказује унутар дугмета                                                                         |
| наслов      | низ                   | Текстуални садржај дугмета                                                                                                           |
| пунаШирина  | булевска вредност     | Одређује да ли дугме треба да заузима целу ширину контејнера                                                                         |
| variant     | низ                   | Варијанта визуелног стила дугмета. Опције укључују `примарна`, `секундарна` и `терцијарна`                           |
| величина    | низ                   | Величина дугмета. Има два избора: `мала` и `средња`                                                  |
| позиција    | низ                   | Позиција дугмета у односу на осталу браћу. Опције укључују: `самостално`, `лево`, `десно`, `средина` |
| нагласак    | низ                   | Боја акцента дугмета. Опције укључују: `подразумевано`, `плава` и `опасна`                           |
| ускоро      | булевска вредност     | Означава да ли је дугме истакнуто као "ускоро" (на пример за предстојеће функције)                                |
| онемогућено | булевска вредност     | Одређује да ли је дугме онемогућено или не                                                                                           |
| фокус       | булевска вредност     | Одређује да ли дугме има фокус                                                                                                       |
| приКлику    | функција              | Функција повратног позива која се активира када корисник кликне на дугме                                                             |

</Tab>

</Tabs>

## Група дугмета

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| Својства         | Тип                   | Опис                                                                                                                                 |
| ---------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| className        | низ                   | Опционо име за додатно обликовање                                                                                                    |
| Икона            | `React.ComponentType` | Опционални компоненте иконе која се приказује унутар дугмета                                                                         |
| наслов           | низ                   | Текстуални садржај дугмета                                                                                                           |
| величина         | низ                   | Величина дугмета. Има два избора: `мала` и `средња`                                                  |
| позиција         | низ                   | Позиција дугмета у односу на осталу браћу. Опције укључују: `самостално`, `лево`, `средина`, `десно` |
| applyShadow      | булевска вредност     | Одређује да ли да се на дугме примени сенка                                                                                          |
| додајЗамагљујење | булевска вредност     | Одређује да ли да се на дугме примени ефекат замагљивања                                                                             |
| онемогућено      | булевска вредност     | Одређује да ли је дугме онемогућено                                                                                                  |
| фокус            | булевска вредност     | Означава да ли дугме има фокус                                                                                                       |

</Tab>
</Tabs>

## Floating Button Group

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| Својства | Тип       | Опис                                                                                | Подразумевано |
| -------- | --------- | ----------------------------------------------------------------------------------- | ------------- |
| величина | низ       | Величина дугмета. Има два избора: `мала` и `средња` | small         |
| деца     | ReactNode | Низ React елемената који представљају појединачна дугмад унутар групе               |               |

</Tab>

</Tabs>

## Плутајуће иконично дугме

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Својства         | Тип                   | Опис                                                                                                                                 |
| ---------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| className        | низ                   | Опционо име за додатно обликовање                                                                                                    |
| Икона            | `React.ComponentType` | Опционални компоненте иконе која се приказује унутар дугмета                                                                         |
| величина         | низ                   | Величина дугмета. Има два избора: `мала` и `средња`                                                  |
| позиција         | низ                   | Позиција дугмета у односу на осталу браћу. Опције укључују: `самостално`, `лево`, `десно`, `средина` |
| applyShadow      | булевска вредност     | Одређује да ли да се на дугме примени сенка                                                                                          |
| додајЗамагљујење | булевска вредност     | Одређује да ли да се на дугме примени ефекат замагљивања                                                                             |
| онемогућено      | булевска вредност     | Одређује да ли је дугме онемогућено                                                                                                  |
| фокус            | булевска вредност     | Означава да ли дугме има фокус                                                                                                       |
| приКлику         | функција              | Функција повратног позива која се активира када корисник кликне на дугме                                                             |
| јеАктивно        | булевска вредност     | Одређује да ли је дугме у активном стању                                                                                             |

</Tab>

</Tabs>

## Floating Icon Button Group

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| Својства    | Тип | Опис                                                                                                                                                                                                                                                                        |
| ----------- | --- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className   | низ | Опционо име за додатно обликовање                                                                                                                                                                                                                                           |
| величина    | низ | Величина дугмета. Има два избора: `мала` и `средња`                                                                                                                                                                                         |
| иконаДугмад | низ | Низ објеката, сваки представља икона дугме у групи. Сваки објекат треба да садржи компоненту иконе коју желите приказати на дугмету, функцију коју желите позвати када корисник кликне на дугме и да ли дугме треба да буде активно или не. |

</Tab>

</Tabs>

## Светло дугме

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| Својства    | Тип               | Опис                                                                                               |
| ----------- | ----------------- | -------------------------------------------------------------------------------------------------- |
| className   | низ               | Опционо име за додатно обликовање                                                                  |
| икона       | `React.ReactNode` | Икона коју желите приказати у дугмету                                                              |
| наслов      | низ               | Текстуални садржај дугмета                                                                         |
| нагласак    | низ               | Боја акцента дугмета. Опције укључују: `секундарна` и `терцијарна` |
| активни     | булевска вредност | Одређује да ли је дугме у активном стању                                                           |
| онемогућено | булевска вредност | Одређује да ли је дугме онемогућено                                                                |
| фокус       | булевска вредност | Означава да ли дугме има фокус                                                                     |
| приКлику    | функција          | Функција повратног позива која се активира када корисник кликне на дугме                           |

</Tab>

</Tabs>

## Светло иконично дугме

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Својства    | Тип                   | Опис                                                                                               |
| ----------- | --------------------- | -------------------------------------------------------------------------------------------------- |
| className   | низ                   | Опционо име за додатно обликовање                                                                  |
| тестИД      | низ                   | Тест идентификатор за дугме                                                                        |
| Икона       | `React.ComponentType` | Опционални компоненте иконе која се приказује унутар дугмета                                       |
| наслов      | низ                   | Текстуални садржај дугмета                                                                         |
| величина    | низ                   | Величина дугмета. Има два избора: `мала` и `средња`                |
| нагласак    | низ                   | Боја акцента дугмета. Опције укључују: `секундарна` и `терцијарна` |
| активни     | булевска вредност     | Одређује да ли је дугме у активном стању                                                           |
| онемогућено | булевска вредност     | Одређује да ли је дугме онемогућено                                                                |
| фокус       | булевска вредност     | Означава да ли дугме има фокус                                                                     |
| приКлику    | функција              | Функција повратног позива која се активира када корисник кликне на дугме                           |

</Tab>

</Tabs>

## Главно дугме

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Својства                 | Тип                              | Опис                                                                                                  |
| ------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------- |
| наслов                   | низ                              | Текстуални садржај дугмета                                                                            |
| пунаШирина               | булевска вредност                | Одређује да ли дугме треба да заузима целу ширину контејнера                                          |
| variant                  | низ                              | Варијанта визуелног стила дугмета. Options include `primary` and `secondary`          |
| ускоро                   | булевска вредност                | Означава да ли је дугме истакнуто као "ускоро" (на пример за предстојеће функције) |
| Икона                    | `React.ComponentType`            | Опционални компоненте иконе која се приказује унутар дугмета                                          |
| React `button` реквизити | `React.ComponentProps<'button'>` | Сви стандардни HTML реквизити за дугме су подржани                                                    |

</Tab>

</Tabs>

## Заобљено дугме за иконе

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Својства                 | Тип                                             | Опис |
| ------------------------ | ----------------------------------------------- | ---- |
| Икона                    | `React.ComponentType`                           |      |
| React `button` реквизити | `React.ButtonHTMLAttributes<HTMLButtonElement>` |      |

</Tab>

</Tabs>
